<template>
    <div class="p-8 bg-gray-100 min-h-screen flex justify-center items-center">
        <el-card class="!border-none rounded-2xl shadow-lg p-8 bg-white w-full max-w-5xl">
            <el-page-header content="林下参合格证" @back="$router.back()" class="text-xl font-semibold text-gray-900 mb-6" />
            <div v-if="formData.qrcode" class="flex justify-center mb-8">
                <el-image
                    :src="getImageUrl(Array.isArray(formData.qrcode) ? formData.qrcode[0] : formData.qrcode.split(',')[0])"
                    fit="contain"
                    class="max-w-full max-h-[600px] rounded-2xl cursor-pointer hover:opacity-80 transition-opacity duration-300"
                    @click="openImageGallery(getImageArray(formData.qrcode), 0)" />
            </div>
            <span v-else class="text-red-600 text-lg font-bold block text-center py-4">无林下参合格证</span>
        </el-card>

        <el-dialog v-model="dialogVisible" :title="'林下参合格证'" width="90%" class="rounded-2xl overflow-hidden shadow-2xl">
            <el-image :src="imageList[0]" fit="contain"
                class="w-full h-[85vh] flex items-center justify-center mx-auto" />
        </el-dialog>
    </div>
</template>

<script lang="ts" setup name="consumerDetail">
import { ref, reactive } from 'vue'
import { useRoute } from 'vue-router'
import config from '@/config'
import { getPlantingDetail } from '@/api/Plantings'

const route = useRoute()
const formData = reactive({
    qrcode: ''
})

// 弹窗是否显示
const dialogVisible = ref(false)
// 当前图片列表
const imageList = ref<string[]>([])

// 将图片数据转换为数组
const getImageArray = (images: string | string[]) => {
    return Array.isArray(images) ? images : images.split(',').map(img => img.trim())
}

// 获取完整的图片 URL
const getImageUrl = (image: string) => {
    // 检查 image 是否已经是完整 URL，如果是则直接返回
    return "https://qy.qiaowanglian.com/" + image
}

// 打开图片浏览工具
const openImageGallery = (images: string[], index: number) => {
    imageList.value = images.map(getImageUrl)
    dialogVisible.value = true
}

// 加载详情数据
const getDetails = async () => {
    try {
        const data = await getPlantingDetail({
            id: route.query.id
        })
        formData.qrcode = data.qrcode || ''
    } catch (error) {
        console.error('获取详情数据失败:', error)
    }
}

getDetails()
</script>

<style scoped>
/* 以下为新增样式，提升页面美观度 */
.el-card {
    transition: all 0.3s ease;
}

.el-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.el-image {
    transition: all 0.3s ease;
}

.el-dialog {
    border-radius: 1rem;
}
</style>
